<app-header>
  <h1 class="sr-only">{{ "currentTab" | i18n }}</h1>
  <div class="left">
    <app-pop-out *ngIf="!inSidebar"></app-pop-out>
    <button
      type="button"
      (click)="refresh()"
      appA11yTitle="{{ 'refresh' | i18n }}"
      *ngIf="inSidebar"
    >
      <i class="bwi bwi-refresh-tab bwi-lg bwi-fw" aria-hidden="true"></i>
    </button>
  </div>
  <div class="search center">
    <input
      type="{{ searchTypeSearch ? 'search' : 'text' }}"
      placeholder="{{ 'searchVault' | i18n }}"
      id="search"
      [(ngModel)]="searchText"
      (input)="search$.next()"
      autocomplete="off"
      (keydown)="closeOnEsc($event)"
      appAutofocus
    />
    <i class="bwi bwi-search" aria-hidden="true"></i>
  </div>
  <div class="right">
    <button type="button" (click)="addCipher()" appA11yTitle="{{ 'addItem' | i18n }}">
      <i class="bwi bwi-plus bwi-lg bwi-fw" aria-hidden="true"></i>
    </button>
  </div>
</app-header>
<main tabindex="-1">
  <div class="no-items" *ngIf="!loaded">
    <i class="bwi bwi-spinner bwi-spin bwi-3x" aria-hidden="true"></i>
  </div>
  <ng-container *ngIf="loaded">
    <app-vault-select (onVaultSelectionChanged)="load()"></app-vault-select>
    <app-callout *ngIf="showHowToAutofill" type="info" title="{{ 'howToAutofill' | i18n }}">
      <p>{{ autofillCalloutText }}</p>
      <button
        type="button"
        class="btn primary callout-half"
        appStopClick
        (click)="dismissCallout()"
      >
        {{ "gotIt" | i18n }}
      </button>
      <button type="button" class="btn callout-half" appStopClick (click)="goToSettings()">
        {{ "autofillSettings" | i18n }}
      </button>
    </app-callout>
    <div class="box list" *ngIf="loginCiphers">
      <h2 class="box-header">
        {{ "typeLogins" | i18n }}
        <span class="flex-right">{{ loginCiphers.length }}</span>
      </h2>
      <div class="box-content">
        <app-cipher-row
          *ngFor="let loginCipher of loginCiphers"
          [cipher]="loginCipher"
          title="{{ 'autoFill' | i18n }}"
          [showView]="true"
          (onSelected)="fillCipher($event)"
          (onView)="viewCipher($event)"
        >
        </app-cipher-row>
        <div class="box-content-row padded no-hover" *ngIf="!loginCiphers.length">
          <p class="text-center">{{ "autoFillInfo" | i18n }}</p>
          <button type="button" class="btn primary link block" (click)="addCipher()">
            {{ "addLogin" | i18n }}
          </button>
        </div>
      </div>
    </div>
    <div class="box list" *ngIf="cardCiphers && cardCiphers.length">
      <h2 class="box-header">
        {{ "cards" | i18n }}
        <span class="flex-right">{{ cardCiphers.length }}</span>
      </h2>
      <div class="box-content">
        <app-cipher-row
          *ngFor="let cardCipher of cardCiphers"
          [cipher]="cardCipher"
          title="{{ 'autoFill' | i18n }}"
          [showView]="true"
          (onSelected)="fillCipher($event)"
          (onView)="viewCipher($event)"
        ></app-cipher-row>
      </div>
    </div>
    <div class="box list" *ngIf="identityCiphers && identityCiphers.length">
      <h2 class="box-header">
        {{ "identities" | i18n }}
        <span class="flex-right">{{ identityCiphers.length }}</span>
      </h2>
      <div class="box-content">
        <app-cipher-row
          *ngFor="let identityCipher of identityCiphers"
          [cipher]="identityCipher"
          title="{{ 'autoFill' | i18n }}"
          [showView]="true"
          (onSelected)="fillCipher($event)"
          (onView)="viewCipher($event)"
        ></app-cipher-row>
      </div>
    </div>
  </ng-container>
</main>
